<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>预约服务</title>
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="dist/styles/main.min.css">
</head>

<body>
    <!-- top -->
    <iframe class="index-iframe" src="top.html" width="100%" height="30px" frameborder="0" scrolling="no"></iframe>
    <!-- nav -->
    <div class="index-nav">
        <div class="index-nav-cont">
            <img class="index-logo" src="img/logo.png" alt="logo" onclick="self.location='index.html'">

            <div class="index-nav-frame clearfix">
                <div class="index-nav-frame-line  active" tabindex="-1" onclick="self.location='index.html'">
                    首页
                </div>

                <div class="index-nav-frame-line" tabindex="-1" onclick="self.location='pdx.html'">
                    PDX
                </div>
                <div class="index-nav-frame-line" tabindex="-1">
                    <div class="index-nav-frame-line-title">用户服务方案<i class="iconfont icon-up updown"></i></div>
                    <div class="index-nav-frame-line-center">
                        <div class="index-nav-frame-line-li">
                            <a class="index-nav-a" href="fangan1.html">肿瘤患者服务方案</a>
                        </div>
                        <div class="index-nav-frame-line-li">
                            <a class="index-nav-a" href="fangan2.html">科研机构服务方案</a>
                        </div>
                        <div class="index-nav-frame-line-li">
                            <a class="index-nav-a" href="fangan3.html">药物研发企业服务方案</a>
                        </div>
                    </div>
                </div>
                <div class="index-nav-frame-line" tabindex="-1" onclick="self.location='information.html'">
                    学术资讯
                </div>
                <div class="index-nav-frame-line" tabindex="-1" onclick="self.location='about.html'">
                    关于我们
                </div>
                <!-- <div class="index-nav-frame-line" tabindex="-1" onclick="self.location='join.html'">
                    加入我们
                </div> -->
            </div>
        </div>
    </div>
    <!-- banner -->
    <div class="index-banner">
        <img src="img/service-banner.png" width="100%">
    </div>
    <!-- 学术资讯 -->
    <div class="min-width info-article">
        <div class="service-left-cont">
            <ul class="service-left-ul">
                <li class="service-left-items">
                    <label class="service-need">服务名称</label>
                    <select class="service-select" id="serviceSelect">
                        <!-- <option value="0">肿瘤患者服务方案</option>
                        <option value="1">科研机构服务方案</option>
                        <option value="2">药物研发企业服务方案</option>
                        <option value="3">其他业务</option> -->
                    </select>
                </li>
                <li class="service-left-items">
                    <label class="service-need">服务需求</label>
                    <textarea class="service-textarea" id="textarea"></textarea>
                </li>
                <li class="service-left-items">
                    <label class="service-need">您的身份</label>
                    <ul class="service-idcard">
                        <li class="service-idcard-items on" onclick="user('0')">患者</li>
                        <li class="service-idcard-items" onclick="user('1')">企业</li>
                        <li class="service-idcard-items" onclick="user('2')">科研机构</li>
                    </ul>
                </li>
                <li class="service-left-items">
                    <label class="service-need">您的名称</label>
                    <input class="service-ipt" id="name" placeholder="请输入您的名称，若为企业则填写企业名称" type="text">
                </li>
                <li class="service-left-items">
                    <label class="service-need">联系电话</label>
                    <input class="service-ipt" id="tel" placeholder="请输入您的联系电话" type="text">
                </li>
                <li class="service-left-items">
                    <label class="service-need noxing">联系邮箱</label>
                    <input class="service-ipt" id="email" placeholder="请输入您的邮箱地址" type="text">
                </li>
                <li>
                    <button class="service-btn" onclick="submit()">提交</button>
                </li>
            </ul>
        </div>
        <div class="service-right-cont">
            <img src="img/service-map.png" width="100%">
            <ul class="service-right-ul">
                <li><i class="iconfont icon-phone"></i> 010-67779532</li>
                <li><i class="iconfont icon-mail"></i> weirongfei@cnilas.org</li>
                <li><i class="iconfont icon-location"></i> 北京市朝阳区潘家园南里5号</li>
                <li><i class="iconfont icon-shijian1"></i> 周一至周五9:00-18:00</li>
            </ul>
        </div>
    </div>
    <!-- footer -->
    <iframe class="index-iframe" id="footer" src="foot.html" frameborder="0" scrolling="no" width="100%" height="260px"></iframe>
    <!-- 浮动面板 -->
    <div class="quick-right">
        <div class="quick-right-cont">
            <ul class="quick-right-ul">
                <li class="quick-right-items" id="erweima"><i class="iconfont icon-erweima"></i></li>
                <li class="quick-right-items" id="quickTel"><i class="iconfont icon-phone"></i></li>
                <li class="quick-right-items" id="quickEmail" onclick="self.location='service.html?id=3'"><i class="iconfont icon-mail"></i></li>
                <li class="quick-right-items" id="top"><i class="iconfont icon-xiangshangshouqi-xianxingyuankuang"></i></li>
            </ul>
            <div class="quick-right-img">
                <p class="quick-right-img-ms">扫码关注微信公众号</p>
                <img src="img/erweima.png" width="100%">
            </div>
            <div class="quick-right-tel">
                <p>联系电话</p>
                <p>010-67779532</p>
            </div>
        </div>
    </div>
</body>
<script src="dist/js/main.min.js"></script>
<script src="layer/layer.js"></script>
<script src="config/api.js"></script>
<script>
    // 利用事件捕获提高js效率
    $(".index-nav-frame-line-li").click(function (e) {
        $(this).addClass("on").siblings().removeClass("on");
    })
    // 身份
    $(".service-idcard-items").click(function () {
        $(this).addClass("on").siblings().removeClass("on");
    })
    // 
    let html = '';
    let search = location.search;
    let id = search.split("=")[1]; //根据id来判断用户从哪个页面过来，默认选中服务类型
    let name = ''; //用户名称
    let phone = ''; //用户电话
    let email = ''; //邮箱
    let content = ''; //留言内容
    let userType = '0'; //用户类型 0企业 1患者 2科研机构 默认0
    let serverType = id; //服务类型 0 肿瘤患者服务方案 1 科研机构服务方案 2 药物研发企业服务方案 3 其他服务
    let RegExp = /^((0\d{2,3}-\d{7,8})|(1[3584796]\d{9}))$/; //验证手机格式
    let emailNumReg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/; //邮箱格式验证
    //根据id来判断用户从哪个页面过来，默认选中服务类型
    if (id == 0) {
        html += '<option value="0" selected = "selected">肿瘤患者服务方案</option>';
        html += '<option value="1">科研机构服务方案</option>';
        html += '<option value="2">药物研发企业服务方案</option>';
        html += '<option value="3">其他业务</option>';
        let serverType = '0';
    } else if (id == 1) {
        html += '<option value="0">肿瘤患者服务方案</option>';
        html += '<option value="1" selected = "selected">科研机构服务方案</option>';
        html += '<option value="2">药物研发企业服务方案</option>';
        html += '<option value="3">其他业务</option>';
        let serverType = '1';
    } else if (id == 2) {
        html += '<option value="0">肿瘤患者服务方案</option>';
        html += '<option value="1">科研机构服务方案</option>';
        html += '<option value="2" selected = "selected">药物研发企业服务方案</option>';
        html += '<option value="3">其他业务</option>';
        let serverType = '2';
    } else {
        html += '<option value="0">肿瘤患者服务方案</option>';
        html += '<option value="1">科研机构服务方案</option>';
        html += '<option value="2">药物研发企业服务方案</option>';
        html += '<option value="3" selected = "selected">其他业务</option>';
        let serverType = '3';
    };
    $("#serviceSelect").html(html);
    // 自主选择服务类型
    $("#serviceSelect").change(function () {
        serverType = $("#serviceSelect").val();
        console.log(serverType)
    });
    // 设置身份类型
    function user(n) {
        userType = n;
    };
    // submit
    function submit() {
        name = $("#name").val().trim();
        phone = $("#tel").val().trim();
        email = $("#email").val().trim();
        content = $("#textarea").val().trim();
        if (name == '' || phone == '' || content == '') {
            layer.msg("必填项不能为空");
        } else if (RegExp.test(phone) == false) {
            layer.tips('手机号码格式不正确', '#tel');
        } else if (email != '' && emailNumReg.test(email) == false) {
            layer.tips('邮箱格式不正确', '#email');
        } else {
            $.ajax({
                method: "post",
                url: ajaxUrl + "/message/add",
                dataTypt: "json",
                async: true,
                data: JSON.stringify({
                    "name": name,
                    "phone": phone,
                    "email": email,
                    "content": content,
                    "userType": userType,
                    "serverType": serverType
                }),
                contentType: 'application/json;charset=UTF-8',
                success: function (res) {
                    if (res.code == 200) {
                        layer.msg(res.message);
                        $("#name").val('');
                        $("#tel").val('');
                        $("#email").val('');
                        $("#textarea").val('');
                    } else {
                        layer.msg(res.content);
                    }
                }
            })
        }
    };
</script>

</html>